.shopCouponNew {
  width: 21.66rem;
  height: 6.75rem;
  display: flex;
}

.shopCoupon {
  margin: 0 0.91rem 0 0.88rem;
  width: 21.66rem;
  box-shadow:
    0.03rem 0.12rem 0.44rem 0.2rem
    rgba(81, 81, 81, 0.52);
  position: relative;
  margin-bottom: 1.38rem;

  .left {
    flex: 1;
    height: 6.75rem;
    position: relative;

    .postLeft {
      position: absolute;
      right: -4px;
      top: 0;
      width: 8.28rem;
      height: 6.81rem;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      flex-direction: column;
      align-items: center;

      .textOne {
        font-size: 1.63rem;
        color: #fff;
        margin-top: 1.3rem;
        margin-left: 0.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
      }

      .line {
        width: 6.375rem;
        border: dashed 0.043rem #f5f5f5;
        margin-left: 0.6rem;
        margin-top: 0.59rem;
      }

      .textTwo {
        font-size: 0.69rem;
        line-height: 0.84rem;
        color: #fff;
        margin-top: 0.72rem;
        margin-bottom: 0.5rem;
      }

      .tapBox {
        width: 4.66rem;
        height: 1.34rem;
        background-color: #fff;
        border-radius: 0.43rem;
        line-height: 1.44rem;

        span {
          color: #fba560;
          font-size: 0.79rem;
          letter-spacing: 0.08rem;
        }
      }
    }
  }

  .right {
    width: 13.94rem;
    height: 6.75rem;
    padding: 0 0.69rem 0 0.56rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    .dueBox {
      font-size: 0.68rem;
      width: 5rem;
      height: 1.2rem;
      position: absolute;
      right: -21px;
      top: 12px;
      transform: rotate(45deg);
      background: #42a354;
      color: #fff;
      letter-spacing: 0.1rem;
      line-height: 1.2rem;
      text-align: center;
    }

    .isdueBox {
      font-size: 0.91rem;
      width: 6rem;
      height: 1.8rem;
      position: absolute;
      right: -29px;
      top: 7px;
      transform: rotate(45deg);
      background: #cecece;
      color: #000;
      letter-spacing: 0.1rem;
      line-height: 1.8rem;
      text-align: center;
    }

    .right_top {
      width: 100%;
      // height: 4.72rem;
      // border-bottom: dashed 0.04rem #cacaca;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 0.56rem;
      text-align: left;
      position: relative;

      .alreadyReceive {
        width: 100%;
        height: 1.8rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fb946c;
        transform: rotate(-35deg);
        position: absolute;
        bottom: -48px;
        right: -21px;

        .already {
          width: 4.44rem;
          height: 1.8rem;
          border: 1px solid #fb946c;
          display: flex;
          align-items: center;
          justify-content: center;

          .inready {
            width: 3.8rem;
            height: 1.36rem;
            text-align: center;
            line-height: 1.36rem;
            border: 1px solid #fb946c;
          }
        }
      }

      .Receive {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        div {
          width: 4.97rem;
          height: 1.41rem;
          // background-color: #fb946c;
          border-radius: 0.43rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.85rem;
          color: #fff;
        }

        .describe {
          flex: 1;
          display: inline-block;
          text-align: left;
          color: #fb605f;
          font-size: 0.65rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }

      span {
        font-size: 0.65rem;
        line-height: 0.84rem;
        letter-spacing: 0.01rem;
        color: #9c9c9c;
        margin-bottom: 0.4rem;
      }

      .right_top_text {
        display: flex;
        align-items: center;
        overflow: hidden;
        margin-bottom: 0.84rem;

        div {
          // background-color: #fbbd5c;
          border-radius: 0.22rem;
          // width: 3.69rem;
          height: 1.25rem;
          // margin-right: 0.53rem;
          font-size: 0.71rem;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 0.5rem;
        }

        span {
          font-size: 0.8rem;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
          padding: 0 0.5rem;
          margin: 0;
          letter-spacing: 0;
          line-height: 1.25rem;
        }
      }

      .right_top_bottom_text {
        display: flex;
        justify-content: space-between;

        span {
          font-size: 0.61rem;
          color: #9c9c9c;
          line-height: 1.7rem;
        }

        div {
          width: 3.34rem;
          height: 1.22rem;
          background-color: #fff;
          border-radius: 0.43rem;
          border: solid 0.04rem #ff8383;
          font-size: 0.78rem;
          color: #ff8383;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            font-size: 0.62rem;
            color: #ff8383;
            margin-left: 0.25rem;
          }
        }
      }
    }
  }

  .coupon_voucher_btm {
    display: none;
    position: relative;
    box-sizing: border-box;
    padding: 0.5rem 0.625rem;
    background-color: #f2f2f7;
    border-radius: 0.1875rem;

    .coupon_voucher_explain {
      color: #999;
      font-size: 12px;
      text-align: left;
    }
  }

  .coupon_voucher_btm.hies {
    display: block;
  }
}
